<template>
  <div class="workshops_container">
    <dv-loading v-if="loading"></dv-loading>
    <table-header :name="title" icon="balance-scale" />
    <div class="workshops_main">
      <div class="data_box_item" v-for="(item, index) in real" :key="index">
        <div class="item_title">{{ item.meterinfo }}</div>
        <div class="item_data">
          <div class="item_data_txt">总累计量</div>
          <div class="item_data_val">{{ item.allsum }}</div>
          <div class="item_data_sym">t</div>
        </div>
        <div class="item_data">
          <div class="item_data_txt">日累计量</div>
          <div class="item_data_val">{{ item.daysum }}</div>
          <div class="item_data_sym">t</div>
        </div>
        <div class="item_data">
          <div class="item_data_txt">班累计量</div>
          <div class="item_data_val">{{ item.classsum }}</div>
          <div class="item_data_sym">t</div>
        </div>
        <div class="item_data">
          <div class="item_data_txt">瞬时流量</div>
          <div class="item_data_val">{{ item.flow }}</div>
          <div class="item_data_sym">t/h</div>
        </div>
        <div class="item_data">
          <div class="item_data_txt">运行状态</div>
          <div class="item_data_val">{{ item.DevStatusStr }}</div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import TableHeader from "../../components/tableHeader/index";

export default {
  components: {
    TableHeader,
  },
  data() {
    return {
      loading: true,
      real: {},
      title: "皮带秤",
      signArray: [],
    };
  },
  sockets: {
    connect: function (data) {
      console.log("连接connect", data);
      this.createSocket();
    },
    reconnect(data) {
      console.log("重新连接", data);
      // this.$sockets.emit("connect",1)
      this.$socket.connect();
    },
    disconnect() {
      console.log("socket已断开连接");
    },
    pdcdata(data) {
      var temp = JSON.parse(data).pdcdata;
      this.real = temp;
      console.log(this.real, "message");
      if (this.real) {
        this.signArray = [];
        for (var key in this.real) {
          if (key.indexOf("_fk16") != -1) {
            this.signArray.push({
              mark: key.slice(3, 6),
            });
          }
        }
        this.loading = false;
      }
    },
  },
  beforeDestroy() {
    this.$socket.close();
  },
  mounted() {
    this.createSocket();
  },
  methods: {
    //创建socket链接
    createSocket() {
      this.$socket.connect();
      this.$socket.emit("pdcdata", { subscribe: true });
    },
  },
};
</script>
<style lang="scss" scoped>
.workshops_main {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: top;
  padding: 0 1.8rem !important;
  overflow: hidden;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.data_box_item{
    width:calc(100% / 3.2);
    height: calc(100% / 4.5);
    padding: 0.2rem 0.7rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border: 1px solid #00def8;
    border-radius: 10px;
    color: #d9d9d9;
    box-sizing: border-box;
}
.item_title{
    width:100%;
    text-align: center;
    font-size: 0.2rem;
    font-weight: 700;
    padding: 0.05rem 0 0.15rem 0;
}
.item_data{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    font-size: 0.17rem !important;
    box-sizing: border-box;
}
.item_data_txt{
    width: 50%;
    padding: 0.05rem 0;
    font-weight: 600;
}
.item_data_val{
    width: 30%;
    text-align: center;
    background: #000;
    padding: 0.05rem 0;
    color: #52c41a;
    font-weight: 600;
}
.item_data_sym{
    width:20%;
    text-align: center;
    padding: 0.05rem 0;
    font-weight: 600;
    font-size: 0.2rem !important;
}
</style>
